<!-- 订单管理 -->
<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>订单状态</p>
          <el-select v-model="OrderQO.status" size="mini" placeholder="请选择订单状态" filterable>
            <!-- <el-option v-for="item in items" :key="item" :label="item" :value="item" /> -->
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>按订单类型</p>
          <el-select v-model="OrderQO.type" size="mini" placeholder="请选择订单类型" filterable>
            <!-- <el-option v-for="item in items" :key="item" :label="item" :value="item" /> -->
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>按支付方式选择</p>
          <el-select v-model="OrderQO.payment" size="mini" placeholder="请选择支付方式" filterable>
            <!-- <el-option v-for="item in items" :key="item" :label="item" :value="item" /> -->
          </el-select>
        </el-col>
        <el-col :md="8" :lg="6">
          <p>付款时间</p>
          <el-date-picker
            v-model="paymentTime"
            type="daterange"
            range-separator="至"
            start-placeholder="请选择日期"
            end-placeholder="请选择日期"
            size="mini"
            value-format="yyyy-MM-dd"
            style="width:100%"
            @change="timeChange"
          />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>订单号/商品名称</p>
          <el-input v-model="OrderQO.search" placeholder="请输入关键字进行查询" size="mini" clearable />
        </el-col>
        <el-col :md="8" :lg="6">
          <el-button style="margin-top:27px" type="primary" size="mini">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="order">
      <ul>
        <li v-for="item in orderList" :key="item.id">
          <el-row class="gl_mb_10 gl_ml_20" style="color:#666666">
            <span>订单号：<span>{{ item.orderNumber }}</span></span>
            <span class="gl_ml_30">付款时间：<span>{{ item.time }}</span></span>
            <div class="order_right order_span">
              <span v-if="item.status === '0'">未支付</span>
              <span v-if="item.status === '1'" style="color:#13ce66">已完成</span>
            </div>
          </el-row>
          <div class="order_title order_box">
            <div class="order_img">
              <img src="" alt="">
            </div>
            <div class="order_text">
              <p>
                <span class="order_bold">{{ item.name }}</span>
                <el-tag size="mini">{{ item.tag }}</el-tag>
              </p>
              <p><span class="gl_mr_5">备注：{{ item.remarks }}</span><i class="el-icon-edit-outline" @click="open" /></p>
            </div>
            <div class="order_right gl_mt_30 order_span">
              <p>合计：{{ item.peoplenum }}人报名，共计{{ item.num }}元</p>
              <p class="gl_margin_15 gl_pl_20 gl_ml_25">{{ item.payment }}<span class="gl_ml_20 order_bold">￥  {{ item.num }}</span></p>
            </div>
          </div>
          <div class="order_bu">
            <div class="order_right">
              <el-button v-if="item.status != '1'" type="warning" size="mini" @click="cancelOrder">取消订单</el-button>
              <el-button v-if="item.status != '1'" type="success" size="mini" @click="collection">确认收款</el-button>
              <el-button type="primary" size="mini" @click="showDetail(item)">订单详情</el-button>
            </div>
          </div>
          <div v-if="item.isShow" class="order_box gl_mt_15">
            <el-row>
              <el-col class="gl_pb_5" style="border-bottom:1px solid #bfbfbf;color:#666666">下单时间：{{ orderDetail.time }}</el-col>
            </el-row>
            <el-row v-for="person in orderDetail.personList" :key="person.cardId" class="gl_py_15">
              <el-col :span="2">
                <img :src="person.img" alt="" style="width:60px;height:60px">
              </el-col>
              <el-col :span="2" class="gl_mt_15">{{ person.name }}</el-col>
              <el-col :span="20" class="gl_mt_15" style="font-size:13px">
                <el-row :gutter="16">
                  <el-col :span="6">身份证：{{ person.cardId }}</el-col>
                  <el-col :span="7">项目：{{ person.game }}</el-col>
                  <el-col :span="3">报名费：¥{{ person.cost1 }}</el-col>
                  <el-col :span="3">兼项费：¥{{ person.cost2 }}</el-col>
                  <el-col :span="3">脚套费：¥{{ person.cost3 }}</el-col>
                </el-row>
                <el-row class="gl_mt_15">机构：{{ person.group }}</el-row>
              </el-col>
            </el-row>
          </div>
        </li>
      </ul>
      <el-row class="gl_pt_20" style="text-align: center;">
        <el-pagination
          :current-page="currentPage"
          :page-size="OrderQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { OrderQO } from '@/lib/form/order.js';
export default {
  name: 'Competition',
  data() {
    return {
      OrderQO: new OrderQO(),
      paymentTime: [],
      currentPage: 1, // 当前页
      totalPage: 0, // 总条目数
      isShowDetail: false,
      orderList: [
        {
          id: 1,
          orderNumber: '1345678987654234567',
          time: '2020/09/10  12:23:45',
          status: '0',
          name: '这是赛事名称',
          tag: '赛事订单',
          remarks: '这是备注内容',
          peoplenum: 3,
          num: 234,
          payment: '线下支付',
          isShow: false
        },
        {
          id: 2,
          orderNumber: '1345678987654234567',
          time: '2020/09/10  12:23:45',
          status: '1',
          name: '这是赛事名称',
          tag: '赛事订单',
          remarks: '这是备注内容',
          peoplenum: 3,
          num: 234,
          payment: '线下支付',
          isShow: false
        }
      ],
      orderDetail: {
        time: '2020/09/10  12:23:45',
        personList: [
          {
            img: '',
            name: '张蓝心',
            cardId: '134588200002141765',
            game: '个人竞技-青少年组-男子45kg',
            cost1: '50.00',
            cost2: '50.00',
            cost3: '50.00',
            group: 'A机构'
          }
        ]
      }
    };
  },
  methods: {
    timeChange(val) {
      if (val instanceof Array) {
        this.OrderQO.paymentStartTime = this.paymentTime[0];
        this.OrderQO.paymentEndTime = this.paymentTime[1];
      } else {
        this.OrderQO.paymentStartTime = '';
        this.OrderQO.paymentEndTime = '';
      }
      // this.refreshList();
    },
    showDetail(val) {
      val.isShow = !val.isShow;
    },
    collection() {
      this.$confirm('您确定已经线下支付费用吗?', '确认收款', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '收款成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    cancelOrder() {
      this.$confirm('您确定要取消订单吗?', '取消订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '取消成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '放弃取消'
        });
      });
    },
    open() {
      this.$prompt('', '备注信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        console.log(value);
        this.$message({
          type: 'success',
          message: '备注成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消备注'
        });
      });
    },
    sizeChange: function(MaxResultCount) {
      this.OrderQO.MaxResultCount = MaxResultCount; // 每页显示条目数
    },
    pageIndexChange(currentPage) {
      this.currentPage = currentPage; // 当前页数
      this.OrderQO.SkipCount = (currentPage - 1) * this.OrderQO.MaxResultCount;
    }
  }
};
</script>

<style lang="scss" scoped>
.order ul li {
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
  padding: 15px;
}
.order_box {
  border: 1px solid  #bfbfbf;
  border-radius: 4px;
  padding: 15px;
}
.order_title {
  height: 130px;
}
.order_img {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  float: left;
  margin-right: 15px;
}
.order_text {
  line-height: 36px;
  height: 100px;
  padding: 5px 15px;
  float: left;
}
.el-tag {
  margin-left: 30px;
}
.order_bu {
  height: 30px;
  margin-top: 15px;
}
.order_right {
  float: right;
}
.order_bold {
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
.order_span {
  font-weight: 400;
  color: #9D9D9D;
  font-size: 14px;
}
</style>

